<template>
  <div id="user">
    <div class="topbg"></div>
    <div class="userinfo">
      <div class="top clearfix">
        <div class="headpng fleft">
          <img :src="userinfo.png" alt="" />
        </div>
        <div class="unbox fleft">
          <p class="un">{{ userinfo.username }}</p>
          <div class="tip">完善资料让小U更懂您</div>
        </div>
        <div class="rb">
          <img src="../assets/img/icon/red_envelopes.png" alt="" />
          <p>每日签到</p>
        </div>
      </div>
      <div class="data">
        <div class="item">
          <p class="num">{{ userinfo.fav }}</p>
          <p>我的收藏</p>
        </div>
        <div class="item">
          <p class="num">{{ userinfo.history }}</p>
          <p>浏览记录</p>
        </div>
        <div class="item">
          <p class="num rb">{{ userinfo.redbag }}</p>
          <p>我的红包</p>
        </div>
        <div class="item">
          <p class="num">{{ userinfo.tickets }}</p>
          <p>优惠券</p>
        </div>
      </div>
    </div>
    <div class="iconbox">
      <div class="top">
        <p class="tl">我的订单</p>
        <p class="tr">全部订单<i class="bi bi-chevron-right"></i></p>
      </div>
      <div class="bot">
        <div class="item">
          <img src="../assets/img/icon/user/order/payment.png" alt="" />
          <p>待付款</p>
        </div>
        <div class="item">
          <img src="../assets/img/icon/user/order/delivery.png" alt="" />
          <p>待收货</p>
        </div>
        <div class="item">
          <img src="../assets/img/icon/user/order/evaluation.png" alt="" />
          <p>评价</p>
        </div>
        <div class="item">
          <img src="../assets/img/icon/user/order/service.png" alt="" />
          <p>售后/退款</p>
        </div>
      </div>
    </div>
    <div class="menu">
      <ul>
        <li>
          <div class="left">
            <img src="../assets/img/icon/user/function/address.png" alt="" />
            <p>地址管理</p>
          </div>
          <div class="right">
            <i class="bi bi-chevron-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../assets/img/icon/user/function/wallet.png" alt="" />
            <p>我的钱包</p>
          </div>
          <div class="right">
            <p>剩余{{ userinfo.ucoin }}U币</p>
            <i class="bi bi-chevron-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../assets/img/icon/user/function/QR_code.png" alt="" />
            <p>我的二维码</p>
          </div>
          <div class="right">
            <i class="bi bi-chevron-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../assets/img/icon/user/function/partner.png" alt="" />
            <p>我的小伙伴</p>
          </div>
          <div class="right">
            <i class="bi bi-chevron-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../assets/img/icon/user/function/free.png" alt="" />
            <p>0元试用</p>
          </div>
          <div class="right">
            <i class="bi bi-chevron-right"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { Member } from "../util/request/api";
export default {
  data() {
    return {
      uid: "",
      userinfo: {
        username: "代用名",
        png: "",
        fav: 12,
        history: 12,
        redbag: 0,
        tickets: 12,
        ucoin: 200,
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("user")) {
      next();
    } else {
      Dialog.confirm({
        message: "请先登录",
      })
        .then(() => {
          next("/login");
        })
        .catch(() => {
          next("/home");
        });
      return;
    }
  },
  mounted() {
    let userinfo = JSON.parse(sessionStorage.getItem("user"));
    this.uid = userinfo.uid;
    this.userinfo.png = userinfo.avatarurl;
    this.userinfo.username = userinfo.nickname;
  },
};
</script>

<style scoped>
@import url("../assets/css/user.css");
</style>